<template>
  <div v-if="initing">
    <Button type="primary" class="back-button" @click="$router.push({path:`/integral-calculation-management/calculation/detailed/${rankId}`})" icon="md-arrow-back">返回上一级</Button>
    <Card>
      <Row>
        <Table stripe border :columns="tableColumnsShow" :data="tableDataShow"></Table>
      </Row>
    </Card>
    <Card class="m-t-sm">
      <Row>
        <Table :loading="loading" stripe border :columns="tableColumns" :data="tableData"></Table>
        <!-- <page-temp :total="total" :current="page.pageNo" :size="page.pageSize" @changePage='changePage'></page-temp> -->
        <Button type="success" @click="exportUserExcel">导出EXCEL</Button>
      </Row>
    </Card>
  </div>
</template>

<script>
import dict from "_c/dict/dict.vue";
import dictSpan from "_c/dict/dict-span.vue";
import Api from "@/api/calculation";
import personModal from "./person-modal.vue";
import { getDict } from "@/api/configure";
const api = new Api();
// 赛事管理
export default {
  components: {
    dict,
    dictSpan,
    personModal
  },
  data() {
    return {
      initing: false,
      loading: true,
      total: 0,
      rankId: null,
      detailId: this.$route.params.detailId,
      page: {},
      AGOUTS: [],
      AGINS: [],
      tableColumns: [
        {
          title: "赛事名称",
          key: "eventsName",
          ellipsis: true,
          render: (h, params) => {
            let self = this;
            let title = self.$config.userName(
              params.row.eventsName,
              params.row.eventsEnglishName
            );
            return h("span", { domProps: { title } }, title);
          }
        },
        {
          title: "比赛名称",
          key: "fieldName",
          ellipsis: true,
          render: (h, params) => {
            let self = this;
            let title = self.$config.userName(
              params.row.fieldName,
              params.row.fieldEnglishName
            );
            return h("span", { domProps: { title } }, title);
          }
        },
        {
          title: "比赛场次",
          type: "fieldNumber",
          width: 100,
          render: (h, params) => {
            return h(
              "span",
              this.$config.fieldNumberStr(params.row.fieldNumber)
            );
          }
        },
        {
          title: "比赛级别",
          type: "gradeCode",
          width: 100,
          render: (h, params) => {
            return h(dictSpan, {
              props: {
                code: "ZGX_BSJB",
                parentCode: params.row.kindCode,
                value: params.row.gradeCode
              }
            });
          }
        },
        {
          title: "比赛时间",
          type: "fieldTime",
          // ellipsis: true,
          render: (h, params) => {
            let self = this;
            let title = self.$config.getDate(
              params.row.fieldTime,
              params.row.fieldEndTime
            );
            return h("span", { domProps: { title } }, title);
          }
        },

        {
          title: "第一轮",
          key: "roundFirst",
          render: (h, params) => {
            let self = this;
            return h("span", self.$config.toStr(params.row.roundFirst));
          }
        },
        {
          title: "第二轮",
          key: "roundSecond",
          render: (h, params) => {
            let self = this;
            return h("span", self.$config.toStr(params.row.roundSecond));
          }
        },
        {
          title: "第三轮",
          key: "roundThird",
          render: (h, params) => {
            let self = this;
            return h("span", self.$config.toStr(params.row.roundThird));
          }
        },
        {
          title: "第四轮",
          key: "roundFourth",
          render: (h, params) => {
            let self = this;
            return h("span", self.$config.toStr(params.row.roundFourth));
          }
        },
        {
          title: "杆数",
          key: "rodNumber",
          render: (h, params) => {
            let self = this;
            return h("span", self.$config.toStr(params.row.rodNumber));
          }
        },
        {
          title: "名次",
          key: "showRank",
          render: (h, params) => {
            let self = this;
            return h("span", self.$config.toStr(params.row.showRank));
          }
        },
        {
          title: "得分",
          key: "score",
          render: (h, params) => {
            return h(
              "span",
              {
                style: {
                  color: "orange"
                }
              },
              params.row.score
            );
          }
        },
        {
          title: "赛事衰减等级",
          key: "attenuationRatio",
          render: (h, params) => {
            return h(
              "span",
              this.$config.toPercent(params.row.attenuationRatio)
            );
          }
        }
      ],
      tableData: [],
      tableColumnsShow: [
        {
          title: "选手名称",
          key: "userName",
          align: "left",
          render: (h, params) => {
            let self = this;
            return h(personModal, {
              props: {
                personId: "2967426520744960", //params.row.userId
                userName: params.row.userName,
                AGOUTS: self.AGOUTS,
                AGINS: self.AGINS
              }
            });
          }
        },
        {
          title: "赛事类型",
          key: "kindCode",
          render: (h, params) => {
            let self = this;
            return h(dictSpan, {
              props: {
                code: "JSGZ",
                value: params.row.kindCode
              }
            });
          }
        },
        {
          title: "计算周期",
          key: "startCountcycletime",
          render: (h, params) => {
            let self = this;
            let time = self.$config.getDate(
              params.row.startCountcycletime,
              params.row.endCountcycletime
            );

            return h("span", time);
          }
        },
        {
          title: "个人排名积分",
          key: "score",
          render: (h, params) => {
            return h("span", this.$config.toIntegral(params.row.score));
          }
        }
      ],
      tableDataShow: []
    };
  },
  mounted() {
    let self = this;
    Promise.all([
      getDict({ code: "AG_OUT" }),
      getDict({ code: "AG_IN" }),
      api.personRankDetail(self.detailId)
    ])
      .then(([AGOUTS, AGINS, data]) => {
        self.AGOUTS = AGOUTS;
        self.AGINS = AGINS;
        self.tableDataShow = [data];
        self.rankId = data.rankId;
        self.page.userId = data.userId;
        self.page.rankId = data.rankId;
        self.initing = true;
        self.fetchList();
      })
      .catch(error => {
        self.initing = true;
        self.fetchList();
      });
  },
  methods: {
    // 获取数据
    fetchList() {
      this.loading = true;
      api
        .queryUserList(this.page)
        .then(data => {
          this.loading = false;
          this.tableData = data || [];
          // this.total = data.count || 0;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    // 分页
    changePage(pageNum) {
      this.page.pageNo = pageNum;
      this.fetchList();
    },
    exportUserExcel() {
      let self = this;
      api
        .exportUserExcel({ rankId: self.page.rankId, userId: self.page.userId })
        .then(fileUrl => {
          let link = document.createElement("a");
          link.href = fileUrl;
          // let suffix = fileUrl.substr(fileUrl.lastIndexOf("."));
          // link.download = self.detail.eventsName + "场次安排" + suffix;
          link.click();
        });
    }
  }
};
</script>

<style scoped>
</style>
